<template>
	<div class="layout-padding" style="overflow-y: auto">
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover">
					<el-descriptions title="服务器信息" column="2">
						<el-descriptions-item label="服务器名称：">{{ serverData.MachineName }}</el-descriptions-item>
						<el-descriptions-item label="服务器IP：">{{ serverData.IP }}</el-descriptions-item>
						<el-descriptions-item label="系统名称：">{{ serverData.OSName }}</el-descriptions-item>
						<el-descriptions-item label="系统架构：">{{ serverData.OSArchitecture }}</el-descriptions-item>
						<el-descriptions-item label=".Net版本：">{{ serverData.DoNetName }}</el-descriptions-item>
						<el-descriptions-item label="CPU数量：">{{ serverData.CpuCount }}</el-descriptions-item>
						<el-descriptions-item label="服务开始运行时间：">{{ serverData.StartTime }}</el-descriptions-item>
						<el-descriptions-item label="服务运行时间：">{{ serverData.RunTime }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover" class="mt20">
					<h1 class="mb30">CPU/RAM信息</h1>
					<el-row>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
							<el-progress type="dashboard" :percentage="rateData.cpu" :color="colors" />
							<div class="ml20">
								<el-text size="large">CPU使用率</el-text>
							</div>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
							<el-progress type="dashboard" :percentage="rateData.ram" :color="colors" />
							<div class="ml20">
								<el-text size="large">RAM使用率</el-text>
							</div>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
							<el-progress type="dashboard" :percentage="rateData.app" :color="colors" />
							<div class="ml10">
								<el-text size="large">应用RAM使用率</el-text>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover" class="mt20">
					<h1 class="mb30">磁盘信息</h1>
					<el-row>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="(item,index) in diskData" :key="index">
							<div class="ml20 mb15">
								<el-text size="large" type="primary">{{item.DiskName}}盘使用率</el-text>
							</div>
							<el-progress type="dashboard" :percentage="(item.Used/item.TotalSize*100).toFixed(2)" :color="colors" />
							<div style="margin-bottom: 5%;">
								<el-text size="large">共{{ item.TotalSize }}GB / 可用{{item.AvailableFreeSpace}}GB</el-text>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { Ref, ref, onMounted } from 'vue';
import { Get } from '/@/common/http';

const serverData: Ref<any> = ref({});
const rateData = ref({
	cpu: 0,
	ram: 0,
	app: 0,
});
const diskData: Ref<any[]>=ref([]);
const colors = [
	{ color: '#67C23A', percentage: 25 },
	{ color: '#409EFF', percentage: 50 },
	{ color: '#E6A23C', percentage: 75 },
	{ color: '#F56C6C', percentage: 100 },
];

const loadData = () => {
	Get('SysUser/GetServerInfo').then((res:any)=>{
		serverData.value = res.Data;
		rateData.value.cpu = parseInt(res.Data.MemoryInfo.CPURate);
		rateData.value.ram = parseInt(res.Data.MemoryInfo.RAMRate);
		rateData.value.app = parseFloat(res.Data.MemoryInfo.AppRAMRate);
		diskData.value=res.Data.DiskInfo
	});
};
onMounted(() => {
	loadData();
});
</script>
